<template>
  <div class="common-layout">
    <el-container class="container-box">
      <el-header class="header-box">
        <el-input
          class="text-input"
          v-model="textarea"
          rows="7"
          maxlength="1000"
          placeholder="请输入留言内容。。"
          show-word-limit
          type="textarea"
        />
        <div class="button-box">
          <el-button type="primary" plain @click="handleClear()">清空内容</el-button>
          <el-button type="success" plain @click="handleSubmit()">发表留言</el-button>
        </div>
      </el-header>
      <el-main class="main-box">
        <ul
          class="infinite-list"
          style="overflow: auto"
        >
          <div v-for="i in messageList" :key="i" >
            <li class="infinite-list-item1">
              匿名留言：【{{i.content}}】
            </li>
            <li v-for="item in i.child" :key="item" class="infinite-list-item2">
              管理员回复：【{{item.content}}】
            </li>
          </div>
        </ul>
      </el-main>
      <el-pagination
        style="margin-left: 18vw"
        :currentPage="page.currentPage"
        :page-size="page.pageSize"
        layout="prev, pager, next"
        :total="page.pageNum"
        @current-change="handleCurrentChange"
      />
    </el-container>
  </div>
</template>

<script>
import api from '../../api/data.js'
import { ElMessage } from 'element-plus'
import { ref } from "vue";
export default {
  name: "BlogBoard",
  components: {},
  data() {
    return {
      messageList: null,
      page: {
        currentPage: 1,
        pageSize: 5,
        pageNum: 1,
      }
    }
  },
  mounted () {
    this.changePage()
    console.log(this.$store.state.token)
  },
  methods: {
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.pageChange()
    },
    handleClear () {
      this.textarea = ''
    },
    handleSubmit () {
      api.publishMessage({
        token: this.$store.state.token,
        content: this.textarea
      }).then((res) => {
        if (res.code < 300) {
          this.changePage()
          ElMessage({
            message: res.message,
            type: 'success',
          })
        } else {
          ElMessage.error(res.message)
        }
      })
    },
    changePage () {
      api.getAllMessages({
        token: this.$store.state.token,
        pageSize: this.page.pageSize,
        currentPage: this.page.currentPage
      }).then((res) => {
        if (res.code === 342) {
          this.$store.commit('logout')
          this.$store.commit('tokenError')
          this.$router.push({path: '/login'})
        } else if (res.code < 300) {
          this.messageList = res.data.messageList
          this.page.currentPage = res.data.currentPage
          this.page.pageSize = res.data.pageSize
          this.page.pageNum = res.data.pageNum * res.data.pageSize
          console.log(this.articleList)
        } else {
          ElMessage.error(res.message)
        }
      })
    }
  },
  setup() {
    const text = ref("");
    const textarea = ref("");
    return {
      text,
      textarea,
    };
  },
};
</script>

<style scoped>
.common-layout {
  margin-left: 25vw;
  width: 50vw;
}
.infinite-list {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item1 {
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  height: max-content;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  padding:9px;
  margin: 20px 10px 3px 10px;
  border-radius:3px;
}
.infinite-list .infinite-list-item2 {
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  height: max-content;
  background: var(--el-color-success-light-9);
  color: var(--el-color-success);
  padding:9px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius:3px;
}
/* .infinite-list .infinite-list-item1 + .list-item1 {
  margin-top: 10px;
} */
.header-box {
  height: 200px;
}
.main-box {
  height: 590px;
  /* border: 1px solid rgb(171, 171, 175); */
  padding: 1%;
}
.button-box {
  margin-top: 5px;
  float: right;
}
</style>
